<template>
  <!-- 企业信息 -->
  <div class="header">
    <div class="logo">
      <div class="img">
        {{ companyName }}
      </div>
    </div>
    <div class="info">
      <div class="status">
        <div
          class="statusInfo cursorCla"
          @mouseleave="isShowyc"
          @mouseenter="isShowyr"
          style="width:60%"
        >
          <span class="">
            {{ comInfo.qymc }}
          </span>
          <!-- 存续、在业、吊销、注销、迁入、迁出、停业、清算。 -->
          <span :class="[{ cx: comInfo.djzt == '存续' || comInfo.djzt == '在业' }]">{{ comInfo.djzt }}</span>
          <span class="pray">最近更新：{{ comInfo.updateTime }}</span>
          <span
            class=""
            v-show="isShow"
            @click.stop="_copy(comInfo.qymc)"
          >
            <i class="el-icon-document-copy">复制</i>
          </span>
        </div>
        <div>
          <el-button
            type="primary"
            size="small"
            v-show="isjk"
            @click="handelFxjKBtn"
          >风险监控</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handelDeleteFxjkBtn"
            v-show="!isjk"
          >取消监控</el-button>
          <el-button
            type="primary"
            size="small"
            @click="downLoadRiskReport"
            v-has="'downRiskReport'"
          >下载风控报告</el-button>
          <el-button
            type="primary"
            size="small"
            @click="downLoadReport"
            :loading="downLoadReportLoading"
          >下载企业报告</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handelDy"
            v-if="!isdy"
          >订阅</el-button>
          <el-button
            type="primary"
            size="small"
            @click="handelDeleteDy"
            v-else
          >取消订阅</el-button>
          <el-button
            type="primary"
            size="small"
            style="margin-right: 12px"
            @click="goBack"
          >返回</el-button>
        </div>
      </div>
      <el-dialog
        title="监控详情指引"
        center
        :visible.sync="showDialog"
        width="40%"
        custom-class="dialog"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <div class="intrMsg">
          <p class="introduce">
            您可在风险监控页面查看已监控企业的风险详情（点击“风险预警管理-风险监控”菜单即可进入风险监控页面）
          </p>
          <el-image
            class="img"
            :src="require('@/assets/jkxqzy.png')"
            :preview-src-list="srcList"
          ></el-image>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="showDialog = false"
          >关闭</el-button>
        </div>
      </el-dialog>
      <div class="lables">
        <span
          @click="goLicense"
          v-if="sqStatu == '已授权'"
        >{{ sqStatu }}</span>
        <span v-if="nsrType">{{ nsrType }}</span>
        <span v-if="comInfo.qylx">{{ comInfo.qylx.trim() }}</span>
        <el-popover
          placement="bottom"
          trigger="hover"
          v-model="busVisible"
          v-if="jyycData ? Object.keys(jyycData).length > 0 : ''"
        >
          <div>
            <p>列入经营异常名录</p>
            <p>列入时间：{{ jyycData.lrrq }}</p>
            <p>列入原因：{{ jyycData.yy }}</p>
          </div>
          <el-button
            slot="reference"
            type="text"
            style="color: red;padding:0"
          >经营异常</el-button>
        </el-popover>
        <el-popover
          placement="bottom"
          trigger="hover"
          v-model="nameVisible"
          v-if="cymList.length > 0"
        >
          <div style="text-align: center">
            <p
              v-for="(item, index) in cymList"
              :key="index"
            >{{ item }}</p>
          </div>
          <el-button
            slot="reference"
            type="text"
            style="padding:0"
          >曾用名</el-button>
        </el-popover>
        <span>{{ comInfo.sshy }}</span>
        <span
          v-for="(item, index) in labelList"
          :key="index"
          :style="{
            color: item.labelColor.color,
            backgroundColor: item.labelColor.backgroundColor,
          }"
        >{{ item.signName }}</span>
      </div>
      <div>
        <hr style="background-color: #e6e9f4; border: none; height: 1px" />
      </div>
      <div class="msg">
        <p>
          <span class="pray">法定代表人：</span><span class="msgInfo">{{ comInfo.fddbr }}</span><span
            @click="handelCheckCompany(comInfo.fddbr, comInfo.sfzjhm)"
            class="glqy"
          >
            关联企业></span>
        </p>
        <p
          class="cursorCla cursorClaWidth"
          @mouseleave="isShowycTree"
          @mouseenter="isShowyrTree"
        >
          <span class="pray">{{ handelCode(comInfo.shtyxydm) }}</span><span class="msgInfo">{{ comInfo.shtyxydm }}</span>
          <i
            class="el-icon-document-copy"
            v-show="isShowTree"
            @click.stop="_copy(comInfo.shtyxydm)"
          >复制</i>
        </p>
        <p>
          <span class="pray">联系方式：</span><span class="msgInfo">{{ comInfo.dh }}</span>
        </p>
        <p
          class="cursorCla"
          @mouseleave="isShowycTwo"
          @mouseenter="isShowyrTwo"
        >
          <span class="pray">地址：</span><span class="msgInfo">{{ comInfo.jycs }}</span>
          <i
            v-show="isShowTwo"
            @click.stop="_copy(comInfo.jycs)"
            class="el-icon-document-copy"
          >复制</i>
        </p>
      </div>
    </div>
    <!-- 关联企业 -->
    <el-dialog
      :title="dialogName + '关联企业'"
      :visible.sync="dialogVisible"
      width="60%"
      custom-class="dialog"
    >
      <el-table
        :data="glData"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f9fe' }"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="企业名称"
          width="300"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="money"
          label="注册资本（万元）"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <span v-show="isTm">{{ deseHandler(scope.row.money) }}</span>
            <span v-show="!isTm">{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="relative"
          label="关联关系"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="percent"
          label="持股比例"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 授权协议 -->
    <el-dialog
      title="授权协议"
      :visible.sync="dialogLicense"
      width="540px"
      custom-class="dialog"
    >
      <el-image
        v-for="item in imgList"
        :key="item"
        style="width: 500px; height: 500px"
        :src="item"
        :preview-src-list="imgList"
      ></el-image>
    </el-dialog>
    <!-- 下载分控报告提示框 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <p class="downMsg">
        您的下载申请稍后将提交至征信公司，审核通过后风控报告将发送至您的邮箱，请确认邮箱地址是否正确。
      </p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="60"
        :inline="true"
        class="demo-ruleForm"
        @submit.native.prevent
      >
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item
              label="邮箱 "
              prop="email"
              class="formItem"
            >
              <el-input
                v-model="ruleForm.email"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import * as echarts from 'echarts'
// import companyInfo from './companyInfo'
// import associationMap from './associationMap'
// import socialFund from './socialFund'
// import taxInformation from './taxInformation'
// import invoiceInformation from './invoiceInformation'
// import businessInformation from './businessInformation'
// import legalInformation from './legalInformation'
// import intellectualProperty from './intellectualProperty'
// import annualReports from './annualReports'
// import energyAnalysis from './energyAnalysis'
// import accumulationFund from './accumulationFund'
// import noSocialFund from '../unauthorized/noSocialFund'
// import noAccumulationFund from '../unauthorized/noAccumulationFund'
// import noTaxInformation from '../unauthorized/noTaxInformation'
// import noEnergyAnalysis from '../unauthorized/noEnergyAnalysis'
// import noLegalInformation from '../unauthorized/noLegalInformation'
import { getField, getRes, getOnRes } from '@/api/user.js'
import {
  moveToWhiteFormRecmd,
  getW,
  delW,
  getIsJk,
  deleteRelationship,
  addRelationship,
  getQYPushHistory,
} from '@/api/manager.js'
import {
  getCbInfo,
  getZsfx,
  getGlfx,
  relationCo,
  sqStatus,
  getScoring,
  getOpinionInfo,
  qySign,
  getUser,
  genReport,
  submitApprove,
  searchAuthByShtyxydm,
  jyyc,
  getZsfxPage,
  getqySign,
} from '@/api/portay'
import mixin from '@/views/roles/admin/work/mixin'

export default {
  props: ['sqStatu'],
  components: {
    // companyInfo,
    // associationMap,
    // socialFund,
    // taxInformation,
    // invoiceInformation,
    // businessInformation,
    // legalInformation,
    // intellectualProperty,
    // annualReports,
    // energyAnalysis,
    // accumulationFund,
    // noSocialFund,
    // noAccumulationFund,
    // noTaxInformation,
    // noEnergyAnalysis,
    // noLegalInformation,
  },
  mixins: [mixin],
  data() {
    return {
      isShow: false,
      isShowTwo: false,
      isShowTree: false,
      qyjjxx: true,
      gltp: true,
      swxx: false,
      fpxx: true,
      qynb: true,
      jjxx: true,
      scxx: false,
      flxx: false,
      zscq: true,
      sbgjj: false,
      gjjInfo: false,
      qqNewArray: [],
      comInfo: { updateTime: {} },
      companyName: undefined,
      shtyxydm: undefined,
      nsrType: undefined,
      qylxOptions: [],
      opinionInfo: [],
      activeName: 'first',
      dialogName: undefined,
      dialogVisible: false,
      dialogVisible1: false,
      ruleForm: {
        email: '',
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
      },
      glData: [],
      // 渲染已分配的权限id
      jurisdictionId: [],
      permission_routes: [],
      dialogLicense: false,
      imgList: [],
      dataHXFXDL: undefined,

      zsfxSum: 0,
      zsfxData: [],
      glSum: 0,
      gldxSum: 0,
      glfxData: [],
      isdy: false, //是否订阅
      isjk: true, //是否监控
      visible: false,
      scoreData: [
        {
          range: '0~40',
          des: '信用状况亟待改善，可能被列入严重失信主题名单',
          level: 'D',
        },
        {
          range: '40~70',
          des: '信用状况需要改善，可能存在严重失信行为',
          level: 'C',
        },
        {
          range: '70~80',
          des: '信用状况一般，有需要修复的轻微失信记录',
          level: 'B',
        },
        { range: '80~90', des: '信用状况良好', level: 'A' },
        { range: '90~100', des: '信用状况好，信守承诺', level: 'A+' },
      ],
      jyycData: {},
      busVisible: false,
      cymList: [],
      nameVisible: false,
      labelList: [],
      showDialog: false,
      srcList: [require('@/assets/jkxqzy.png')],
      downLoadReportLoading:false
    }
  },
  filters: {
    qylxFilter(val, option) {
      if (!val) return ''
      return option
        .filter((item) => item.value == val)
        .map((ite) => ite.label)[0]
    },
    dateFilter(val) {
      if (!val) return ''
      return val > 0 ? val : '0' + val
    },
  },
  computed: {
    // ...mapGetters(["permission_routes"]),
  },
  created() {
    let params = { page: 1, size: 100, code: 'QYLX' }
    getField(params).then((res) => {
      if (res.status) {
        this.qylxOptions = res.data.records.map((item) => {
          return { label: item.fieldName, value: item.fieldCode }
        })
      }
    })
    //this.shtyxydm = this.$route.query.shtyxydm;
    this.comInfo = JSON.parse(sessionStorage.getItem('comInfo'))
    let index = this.comInfo.qymc.indexOf('淄博市')
    if (index == 0) {
      this.companyName = this.comInfo.qymc.substr(3, 4)
    } else {
      this.companyName = this.comInfo.qymc.substr(0, 4)
    }
    this.getJyyc()
    this.cymList = this.comInfo.cym ? this.comInfo.cym.split(';') : []
    //this.getQyFx();
    //this.getSqStatus();
    this.getqySign()
    //this.getOpinionInfo();
    //this.getScoring();
    this.qySign()
    this.getIsDy()
    this.getIsJkBtn()
  },
  mounted() {
    //this.getCompanyScore();
  },
  methods: {
    isShowyr() {
      this.isShow = true
    },
    isShowyc() {
      this.isShow = false
    },
    isShowyrTwo() {
      this.isShowTwo = true
    },
    isShowycTwo() {
      this.isShowTwo = false
    },
    isShowyrTree() {
      this.isShowTree = true
    },
    isShowycTree() {
      this.isShowTree = false
    },
    // 复制操作
    _copy(val) {
      this.$copyText(val).then(() => {
        this.$message.success('复制成功')
      })
    },

    //判断是否为统一社会信用代码
    handelCode(val) {
      if (val.length == 18 && val.startsWith('91')) {
        return '统一社会信用代码：'
      } else {
        return '工商注册号：'
      }
    },
    //获取是否已经监控
    getIsJkBtn() {
      getIsJk({ shtyxydm: this.comInfo.shtyxydm }).then((res) => {
        if (res.status) {
          if (res.data === 'N') {
            this.isjk = true
          } else {
            this.isjk = false
          }
        }
      })
    },
    //监控
    handelFxjKBtn() {
      let params = { shtyxydm: this.comInfo.shtyxydm }
      addRelationship(params).then((res) => {
        if (res.status) {
          this.isjk = false
          this.$message({
            type: 'success',
            message: `${res.msg}`,
          })
          let param = {
            pageNum: 1,
            pageSize: 10,
            startTime: '',
            endTime: '',
            qymc: '',
          }
          getQYPushHistory(param).then((result) => {
            if (result.status) {
              this.showDialog = Number(result.data.total) == 1 ? true : false
            }
          })
        } else {
          this.$message({
            type: 'error',
            message: `${res.msg}`,
          })
        }
      })
    },
    //取消监控
    handelDeleteFxjkBtn() {
      let params = { shtyxydm: this.comInfo.shtyxydm }
      deleteRelationship(params).then((res) => {
        if (res.status) {
          this.isjk = true
          this.$message({
            type: 'success',
            message: `${res.msg}`,
          })
        } else {
          this.$message({
            type: 'error',
            message: `${res.msg}`,
          })
        }
      })
    },
    //查看是否已订阅
    getIsDy() {
      getW({ shtyxydm: this.comInfo.shtyxydm }).then((res) => {
        if (res.status) {
          if (res.data.records.length > 0) {
            this.isdy = true
          } else {
            this.isdy = false
          }
        } else {
          this.$message({
            type: 'error',
            message: `${res.msg}`,
          })
        }
      })
    },
    //订阅
    handelDy() {
      moveToWhiteFormRecmd(this.comInfo.shtyxydm).then((res) => {
        if (res.status) {
          this.isdy = true
          this.$message({
            type: 'success',
            message: `${res.msg}`,
          })
        } else {
          this.$message({
            type: 'error',
            message: `${res.msg}`,
          })
        }
      })
    },
    //取消订阅
    handelDeleteDy() {
      delW({
        shtyxydm: this.comInfo.shtyxydm,
      }).then((res) => {
        if (res.status) {
          this.isdy = false
          this.$message({
            type: 'success',
            message: `${res.msg}`,
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    },
    //经营异常
    getJyyc() {
      jyyc({
        TYSHXYDM: this.comInfo.shtyxydm,
      }).then((res) => {
        if (res.status) {
          this.jyycData = res.data
        }
      })
    },
    //查看企业授权
    goLicense() {
      if (this.sqStatu == '已授权') {
        let params = {
          shtyxydm: this.comInfo.shtyxydm,
        }
        this.imgList = []
        searchAuthByShtyxydm(params).then((res) => {
          this.dialogLicense = true
          //this.licenseData = res.data;
          res.data.fileList.map((item) => {
            return this.run(item.base64Code, res.data.printBk)
          })
        })
        /*let comInfo = this.comInfo;
                this.$router.push({ path: '/portray1/license',query:{shtyxydm:comInfo.shtyxydm,page:'companyMessage'}});*/
      } else {
        this.$message({
          message: `企业未授权`,
          type: 'warning',
        })
      }
    },
    // 添加水印1
    async run(imgUrl, markText) {
      // 1.图片路径转成canvas
      const tempCanvas = await this.imgToCanvas(imgUrl)
      // 2.canvas添加水印
      //const markText = '我是水印'
      const canvas = this.addWatermark(tempCanvas, markText)
      // 3.canvas转成img
      const img = this.convasToImg(canvas)
      // 查看效果
      this.imgList.push(img.src)
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            qyshxydm: this.comInfo.shtyxydm,
            recvEmail: this.ruleForm.email,
          }
          submitApprove(params).then((res) => {
            this.dialogVisible1 = false
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
          })
        }
      })
    },
    goBack() {
      this.$router.go(-1)
      //this.$router.push({ path: '/portray1/index'});
    },
    //纳税人标识
    qySign() {
      qySign({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        if (res.data && res.data.length > 0) {
          this.nsrType = res.data[0].aji == '是' ? 'A级纳税人' : undefined
        } else {
          this.nsrType = undefined
        }
      })
    },
    //企业授权状态
    getSqStatus() {
      sqStatus({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        this.sqStatu = res.data
      })
    },
    getqySign() {
      getqySign({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        // this.sqStatu = res.data;
        this.labelList = res.data ? res.data : []
        if (this.labelList.length > 0) {
          this.labelList.forEach((item) => {
            if (item.signNature == '中性标签') {
              // item.labelColor = {color:'#5590f4',backgroundColor: '#eaf1fb'}
              item.labelColor = {
                color: '#5da188',
                backgroundColor: '#dff7ea',
              }
            } else if (item.signNature == '正向标签') {
              item.labelColor = {
                color: '#5da188',
                backgroundColor: '#dff7ea',
              }
            } else {
              item.labelColor = {
                color: '#d77c61',
                backgroundColor: '#eaf1fb',
              }
            }
          })
        }
      })
    },
    //企业动态信息
    getOpinionInfo() {
      let params = {
        TYSHXYDM: this.comInfo.shtyxydm,
        pageSize: 6,
        pageNum: 1,
      }
      getZsfxPage(params).then((res) => {
        if (res.status) {
          this.opinionInfo = res.data.records
        }
      })
      /* getOpinionInfo({TYSHXYDM:this.comInfo.shtyxydm}).then(res=>{
                this.opinionInfo = res.data;
            }); */
    },
    //企业风险
    async getQyFx() {
      this.zsfxData = []
      this.glfxData = []
      const dataHXFXDL = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXDL',
      })
      //自身风险
      let zsData = await getZsfx({ tyshxydm: this.comInfo.shtyxydm })
      this.zsfxSum = zsData.data ? zsData.data.sum : 0
      let zsDataList = zsData.data ? zsData.data.list : []
      //关联风险
      const glData = await getGlfx({ tyshxydm: this.comInfo.shtyxydm })
      this.glSum = glData.data ? glData.data.sum : 0
      this.gldxSum = glData.data !== null ? glData.data.list : []
      let glDataListTwo = glData.data !== null ? glData.data.list : []
      dataHXFXDL.map((item1) => {
        let zsindex = zsDataList.findIndex((ite1) => ite1.FXDL == item1.label)
        if (zsindex > -1) {
          let newV = zsDataList[zsindex]
          this.zsfxData.push({ ...newV, code: item1.value })
        } else {
          this.zsfxData.push({ FXDL: item1.label, code: item1.value, num: 0 })
        }
      })
      dataHXFXDL.map((item2) => {
        let glindex = glDataListTwo.findIndex(
          (ite2) => ite2.FXDL == item2.label
        )
        if (glindex > -1) {
          let newW = glDataListTwo[glindex]
          this.glfxData.push({ ...newW, code: item2.value })
        } else {
          this.glfxData.push({ FXDL: item2.label, code: item2.value, num: 0 })
        }
      })
    },
    //查看关联企业
    handelCheckCompany(name, sfz) {
      this.dialogName = name
      this.dialogVisible = true
      relationCo({ sfz: sfz }).then((res) => {
        if (res.status) {
          this.dialogName = name
          this.dialogVisible = true
        }
      })
    },
    //下载风控报告
    downLoadRiskReport() {
      let userId = localStorage.getItem('username')
      getUser({ userId }).then((res) => {
        this.dialogVisible1 = true
        this.ruleForm.email = res.data.userEmail
      })
      /* let comInfo = this.comInfo;
            this.$router.push({ path: '/portray1/riskReport',query:{shtyxydm:comInfo.shtyxydm}}); */
    },
    //下载企业报告
    downLoadReport(){
      //console.log('this.comInfo',this.comInfo)
      this.downLoadReportLoading = true;
      genReport({name:this.comInfo.qymc}).then(res => {
        //console.log('genReport',res)
        this.downLoadReportLoading = false;
        if(res.status){
          window.location.href = res.data;
        }else{
          this.$message.error(res.msg);
        }
       
      })
    },
    //查看全部舆情
    handelCheckConsensus() {
      /* let comInfo = this.comInfo;
            this.$router.push({ path: '/portray1/consensus',query:{shtyxydm:comInfo.shtyxydm,page:'companyMessage'}}); */
      let zsfxData = this.zsfxData
      this.$router.push({
        path: '/portray1/selfRisk',
        query: { zsfxData: zsfxData },
      })
    },
    //企业得分
    getScoring() {
      getScoring({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        if (res.status) {
          let score = res.data.score
          let level = res.data.level
          this.$nextTick(() => {
            this.getCompanyScore(score, level)
          })
        }
      })
    },
    //自身风险
    handelClickSelf() {
      let zsfxData = this.zsfxData
      this.$router.push({
        path: '/portray1/selfRisk',
        query: { zsfxData: zsfxData },
      })
    },
    //关联风险
    handelClickRelative() {
      let glfxData = this.glfxData
      let glSum = this.glSum
      let gldxSum = this.gldxSum
      this.$router.push({
        path: '/portray1/relativeRisk',
        query: { glSum: glSum, gldxSum: gldxSum, glfxData: glfxData },
      })
    },
    //企业评分
    getCompanyScore(score, level) {
      var chartDom = document.getElementById('score')
      var scoreChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '企业评分',
        },
        series: [
          {
            type: 'gauge',
            splitNumber: 5,
            max: 100,
            center: ['45%', '60%'],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.4,
                        color: '#b2ddfc',
                      },
                      {
                        offset: 0.8,
                        color: '#209dff',
                      },
                      {
                        offset: 1,
                        color: '#0c93ff',
                      },
                    ]),
                  ],
                ],
              },
            },
            pointer: {
              show: false,
              itemStyle: {
                color: 'auto',
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4,
              },
            },
            axisLabel: {
              color: '#3faafe',
              distance: 20,
              fontSize: 10,
              fontStyle: 'oblique',
            },
            detail: {
              valueAnimation: true,
              offsetCenter: [0, 30],
              formatter: function (value) {
                return [
                  `{a|${value ? value : '暂无评分'}}`,
                  `{b|${level ? level : '暂无等级'}}`,
                  '{x|综合评分}',
                ].join('\n')
              },
              rich: {
                a: {
                  fontSize: 22,
                  fontWeight: 900,
                  color: '#1497ff',
                },
                b: {
                  fontSize: 18,
                  fontWeight: 700,
                  color: '#68bfff',
                },
                x: {
                  fontSize: 16,
                },
              },
            },
            data: [
              {
                value: score,
              },
            ],
          },
        ],
      }
      option && scoreChart.setOption(option)
      window.addEventListener('resize', () => {
        scoreChart.resize()
      })
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
::v-deep .el-tabs__item {
  box-shadow: none !important;
}
.app-container {
  background: #f0f0f0;
  padding: 24px;
  font-size: 14px;
}
/* 头部信息 */
.header {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  //height: 200px;
  padding: 20px 0;
  display: flex;
  .logo {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .img {
      width: 120px;
      height: 120px;
      display: flex;
      text-align: center;
      align-items: center;
      border-radius: 10px;
      font-size: 40px;
      font-weight: 600;
      letter-spacing: 1px;
      background-color: #2595ef;
      color: #fff;
    }
  }
  .info {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .statusInfo,
    .lables,
    .msg {
      display: flex;
      //height: 40px;
      align-items: center;
      flex-wrap: wrap;
    }
    .statusInfo {
      overflow: hidden;
    }
    .statusInfo span {
      display: inline-block;
      margin-right: 12px;
    }
    .statusInfo span:first-child {
      font-size: 24px;
      font-weight: 900;
      color: #3a3f63;
      //width: 50%;
    }
    .statusInfo span:nth-child(2),
    .lables span {
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
    }
    .statusInfo .cx {
      background-color: #eafde0;
      color: #30cd29;
      padding: 0 12px;
    }
    .lables span {
      margin-right: 12px;
      padding: 0 12px;
      background-color: #e7f4ff;
      color: #2595ef;
      margin-bottom: 10px;
    }
    .lables span:first-child:hover {
      cursor: pointer;
    }
    .msg p {
      margin-right: 62px;
    }
  }
}
.el-icon-document-copy {
  cursor: pointer;
  font-size: 14px;
  color: #4486f4;
  margin-left: 5px;
}
.cursorCla {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.cursorClaWidth {
  width: 25%;
}
.cursorClaTwo {
  font-size: 16px;
  color: #4486f4;
  margin-left: 5px;
}
.msgInfo {
  color: #000;
}
.pray {
  color: #a6a6a6;
}
.glqy {
  color: #4a8bf6;
}
.glqy:hover {
  cursor: pointer;
}
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 125px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
</style>